<template>
	<view class="device_name_layout">
		<view class="top">
			<view class="headImg" @click="chooseImage">
				<image class="img" :src="imagePath" mode="aspectFill"></image>
			</view>
		</view>

		<view class="confirm-btn" @click="setDeviceHeadImg">
			{{$t('setPersonHead.sure')}}
		</view>

	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import {apiUserSetHeaderImage} from "../../api/user_api.js"
	import{onLoad} from"@dcloudio/uni-app";
	import { i18nTool } from '../../utils/i18en';
import { jsonString } from '../../uni_modules/wu-ui-tools/libs/function/test.js';
	const param = {}
	let imei = uni.getStorageSync('currentDevice');
	param.imei = imei
	const imagePath = ref("../../static/device/upload_head.png")
	const tempFilePath = ref(null);
	const chooseImage = () => {
		uni.chooseImage({
			count: 1, //默认9
			crop:{
				width:50 ,
				height:50,
				quality:100,
				
			},
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: res => {
				// chooseImageSuccess(res)
			    tempFilePath.value = res.tempFilePaths[0];
				imagePath.value = res.tempFilePaths[0];
				
			}
		});
	}

	const setDeviceHeadImg = async () => {
		param.filePath = tempFilePath.value;
		if(param.filePath  == null){
			uni.showToast({
				title: i18nTool('setPersonHead.noHeadImgHint'),
				icon: "none",
			})
			return;
		}
		uni.showLoading({
			title:'loading...',
			mask:true
		})
		let res = await apiUserSetHeaderImage(param);
		uni.hideLoading();
		let user = uni.getStorageSync('user');
		user.headUrl = res.content;
		uni.setStorageSync('user',user);
		uni.navigateBack();

	}
	onLoad(()=>{
		uni.setNavigationBarTitle({
			title:i18nTool('setPersonHead.navTitle')
		})
	})
</script>

<style lang="scss" scoped>
	.device_name_layout {

		.top {
			padding: 100rpx 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.headImg {
				width: 140rpx;
				height: 140rpx;
				border-radius: 60rpx;
				.img{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
		.confirm-btn {
			margin-left: 40rpx;
			margin-right: 40rpx;
			margin-top: 60rpx;
			height: 80rpx;
			color: #fff;
			background-color: #53786C;
			border-radius: 40rpx;
			@include flex-box-set(center);

		}
	}
</style>